<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>63-简单的布局</title>
    <!-- <link rel="stylesheet" href="./css/reset.css" /> -->
    <style>
      header,
      main,
      footer {
        width: 1000px;
        /* 上下边距0 左右自动 居中 */
        margin: 0 auto;
      }
      /* 标签选择器 前面是没有.的 */
      /* class类选择器才是.className开头 */
      header {
        height: 150px;
        background-color: silver;
      }

      main {
        height: 400px;
        background-color: #bfa;
        /* 上下10px边距  左右自动居中*/
        margin: 10px auto;
      }

      /* 左侧导航 */
      nav {
        /* 总共1000px */
        width: 200px;
        height: 100%;
        background-color: yellow;
        /* 三个元素都向左浮动 */
        float: left;
      }

      article {
        /* 需要控制宽度 */
        width: 580px;
        height: 100%;
        background-color: orange;
        /* 三个元素都向左浮动 */
        float: left;
        margin: 0px 10px;
      }

      aside {
        width: 200px;
        height: 100%;
        background-color: pink;
        /* 三个元素都向左浮动 */
        float: left;
      }

      footer {
        height: 150px;
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <!-- 语义化标签 头部 -->
    <header></header>
    <!-- 主体 -->
    <main>
      <!-- 左侧导航 -->
      <nav></nav>
      <!-- 中间的内容 -->
      <article></article>
      <!-- 侧边栏 -->
      <aside></aside>
    </main>
    <!--底部 -->
    <footer></footer>
  </body>
</html>
